<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/jquery-3.3.1.js"></script>
    <link type="text/css" rel="styleSheet" href="../js/bootstrap-3.4.1/css/bootstrap.css"/>
    <script src="../js/bootstrap-3.4.1/js/bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>东方汽车商城</title>
    <style type="text/css">
        a {
            color: #0f0f0f;
        }

        a:hover {
            text-decoration: none;
        }

        .btn-add-cust {
            margin: 0 0 20px 0;
        }
    </style>
</head>
<body>
<div id="app">

    <!--新增弹窗-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加客户</h4>
                </div>
                <form id="insertData">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="txt_name">姓名</label>
                            <input type="text" name="name" class="form-control" id="txt_name"
                                   placeholder="员工姓名">
                        </div>
                        <div class="form-group">
                            <label for="text_gender">性别</label>
                            <input type="text" name="gender" class="form-control" id="text_gender"
                                   placeholder="员工性别">
                        </div>
                        <div class="form-group">
                            <label for="text_birth">生日</label>
                            <input type="text" name="birthday" class="form-control" id="text_birth"
                                   placeholder="生日">
                        </div>
                    </div>
                </form>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span
                            class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                    </button>
                    <button @click="addSeller" type="button" class="btn btn-primary" data-dismiss="modal" ><span
                            class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
                    </button>
                </div>
            </div>
        </div>
    </div>


    <div style="width: 1000px; border: 1px groove solid; margin: 0 auto; margin-top: 120px;">
        <button id="btn_add" type="button" class="btn btn-default btn-add-cust" @click="showAddCustModal" >添加客户</button>
        <table class="table table-hover">
            <thead>
            <tr style="font-size: 20px; font-weight: bold; text-align: center; border-top: 1px red solid;">
                <td>编　号</td>
                <td>名  字</td>
                <td>性  别</td>
                <td>生  日</td>
                <td>删  除</td>
            </tr>
            </thead>
            <tbody id="goods" style="text-align: center;">
            <tr style="font-size: 15px;" v-for="seller in sellerList">
                <td>{{seller.idString}}</td>
                <td>{{seller.name}}</td>
                <td>{{seller.gender}}</td>
                <td>{{seller.birthday}}</td>
                <td><button type="button" class="btn btn-default" @click="deleteSeller(seller.idString)">删除</button></td>

            </tr>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">

    var tableVueApp = new Vue({
        el:'#app',
        data: {
            sellerList:[]
        },
        mounted: function () {
            this.$nextTick(function () {
                this.loadListData();
            })
        },
        methods: {
            loadListData: function () {
                $.ajax({
                    "url": "/custom/findAll",
                    "type": "get",
                    "dataType": "json",
                    "success": function (response) {
                        this.sellerList = response;
                    }.bind(this)
                });
            },
            addSeller:function() {

                $.ajax({
                    "url": "/custom/create",
                    "type": "post",
                    "data": $("#insertData").serialize(),
                    "success": function (response) {
                        $("#insertData")[0].reset();
                        this.loadListData();
                    }.bind(this)
                });

            },
            deleteSeller:function(idTodelete){
                $.ajax({
                    "url": "/custom/delete" + "?id=" + idTodelete ,
                    "type": "get",
                    "success": function (response) {
                        this.loadListData();
                    }.bind(this)
                });
            },
            showAddCustModal: function () {
                $("#myModalLabel").text("新增数据");
                $('#myModal').modal();
            }
        }

    });
</script>
</body>
</html>